<template>
  <div>
    <el-container class="login-one homeWrap">
      <el-header></el-header>
      <el-main>
        <br> <br> <br> <br> <br>
        <el-row>
          <el-col :span="8">&nbsp;</el-col>
          <el-col :span="8" style="background-color: white;border-radius: 5%;height: 300px;">
            <h3 align="center">账号登录</h3>
            <el-form ref="form" label-width="80px">
              <br>
              <el-form-item label="用户名" v-show="accountIsShow">
                <el-col :span="22">
                  <el-input  placeholder="请输入用户名" v-model="user.userAccount"></el-input>
                </el-col>
              </el-form-item>

              <el-form-item label="邮箱" v-show="emailIsShow">
                <el-col :span="22">
                  <el-input  placeholder="请输入邮箱" v-model="user.userEmail"></el-input>
                </el-col>
              </el-form-item>

              <el-form-item label="密码" v-show="accountIsShow">
                <el-col :span="22">
                  <el-input placeholder="请输入密码" v-model="user.userPassword" type="password"></el-input>
                </el-col>
              </el-form-item>

              <el-form-item label="验证码" v-show="emailIsShow">
                <el-col :span="22">
                  <el-input ref="code" type="text" class="getcodeinput" placeholder="请输入验证码" v-model="code"/>
                  <span class="show-pwd">
                    <el-button size="small" @click="sendCode()">发送验证码</el-button>
                  </span>
                </el-col>
              </el-form-item>
              <el-form-item>
                <el-button type="success" class="el-icon-user" round @click="account()"></el-button>
                <el-button type="success" class="el-icon-message" round @click="email()"></el-button>
                <el-button type="success" around @click="login()" v-bind:disabled="isUse" v-show="accountIsShow">登录</el-button>
                <el-button type="success" around @click="loginEmail()" v-show="emailIsShow">登录</el-button>
                <el-button type="text" @click="open()" v-show="accountIsShow">注册</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="8"></el-col>
        </el-row>
      </el-main>
    </el-container>

    <el-dialog title="注册" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="姓名">
          <el-input v-model="form.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="账户">
          <el-input v-model="form.userAccount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.userPassword" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false , register()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "login",
    data(){
      return {
        user: { //数据绑定对象
          userAccount: "",
          userPassword: "",
          userEmail: "",
        },
        form:{
          userName:"",
          userAccount: "",
          userPassword: "",
        },
        code: "",
        emailIsShow: false,
        accountIsShow: true,
        maxSize:5,
        isUse:false,
        title: "新增",
        dialogFormVisible: false,
      }
    },
    methods:{
      login(){
        var self = this;
        $.ajax({
          url:"http://localhost:8080/user/loginUser",
          type:"post",
          contentType:"application/x-www-form-urlencoded",
          data:self.user,
          success:function (data) {
            var str= data.info.userAccount
            if (self.user.userAccount==str){
              var user = {"userName":data.info.userName ,"userId": data.info.userId};


              sessionStorage.setItem("user",JSON.stringify(user));

              self.$router.replace("/indexE");
            }else{
              var num = localStorage.getItem("max")
              if(num == 0){
                alert("你已登陆失败5次，账户锁定5秒！")
                self.noIsUse();
                setInterval(self.yesIsUse, 5000);
                localStorage.setItem("max",5);
              }else {
                alert("登陆失败，你还可以登录"+num+"次")
                num -= 1
                localStorage.setItem("max",num);
              }
            }

          }
        })
      },
      noIsUse(){
        this.isUse = true
      },
      yesIsUse(){
        this.isUse = false
      },
      email(){
        var self = this;
        self.accountIsShow = false;
        self.emailIsShow = true;
      },
      loginEmail(){
        var self = this;
        $.ajax({
          url: "http://localhost:8080/user/redisLogin",
          type:"post",
          contentType:"application/x-www-form-urlencoded",
          data:{
            code : self.code,
            email : self.user.userEmail
          },
          success:function (data) {
            localStorage.setItem("userName",self.user.userEmail);
            self.$router.replace("/indexE");
          }
        })
      },
      sendCode(){
        var self = this;
        $.ajax({
          url: "http://localhost:8080/user/redisSend",
          type:"post",
          contentType:"application/x-www-form-urlencoded",
          data:{email: self.user.userEmail},
          success:function (data) {

          }
        })
      },
      open(){
        this.dialogFormVisible = true
      },
      register(){
        var self = this
        $.ajax({
          url:"http://localhost:8080/user/registerUser",
          type:"post",
          contentType:"application/x-www-form-urlencoded",
          data:self.form,
          success:function (data) {
            alert(data.info)
          }
        })
      },
      account(){
        var self = this;
        self.accountIsShow = true;
        self.emailIsShow = false;
      }

    },
    mounted() {
      localStorage.setItem("max",this.maxSize);
    }
  }
</script>

<style>

  .homeWrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .login-one {
    background-color: #1c77ac;
    background-image: url(../../static/images/bg1.jpg);
    background-repeat: no-repeat;
    /*	//background-position:center top;*/
    overflow: hidden;
    height: 100%;
  }

  .getcodeinput{
    width: 72%;
  }

  a {
    color: #fff;
    margin: 50px;
  }


  .login_header span {
    margin-right: 20px;
    cursor: pointer;
  }

</style>
